<template>
    <div class="custom-service-menu">
        <el-tooltip effect="dark" content="管理员" placement="left">
            <div @click="setShowIndex(1)" :class="{'active': showIndex == 1}">
                <i class="el-icon-service"></i>
            </div>
        </el-tooltip>

        <el-tooltip effect="dark" content="用户" placement="left">
            <div @click="setShowIndex(2)" :class="{'active': showIndex == 2}">
                <i class="el-icon-user"></i>
            </div>
        </el-tooltip>
    </div>
</template>
 
<script>
export default {
    name: 'custom-service-menu',
    data() {
        return {
            showIndex: 1
        }
    },
    methods: {
        setShowIndex(arg) {
            this.showIndex = arg
            this.$emit('showIndex', arg)
        }
    }
}
</script>
 
<style scoped>
.custom-service-menu{
    box-sizing: border-box;
    background-color: #2E2E2E;
    display: flex;
    flex-direction: column;
    width: var(--menu-width);
    font-size: 20px;
    color: #9e9faf;
}

.custom-service-menu div{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.custom-service-menu div:last-child{
    border-bottom: none;
}

.custom-service-menu div:hover{
    color: rgba(138,198,209,1);
    background-color: #1a1a1a;
}

.custom-service-menu i{
    padding: 20px 0;
}

.active{
    color: rgb(43, 207, 235);
}
</style>